<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态数据图表 - GSAP DrawSVG</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: #f8fafc;
      font-family: 'Arial', sans-serif;
      overflow: hidden;
    }

    .chart-container {
      width: 80%;
      max-width: 800px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      padding: 30px;
    }

    .chart-title {
      text-align: center;
      color: #334155;
      margin-bottom: 20px;
      font-size: 24px;
      font-weight: bold;
    }

    #chart-svg {
      width: 100%;
      height: auto;
    }

    .axis {
      stroke: #cbd5e1;
      stroke-width: 1;
    }

    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1;
      stroke-dasharray: 4;
    }

    .data-line {
      fill: none;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .data-point {
      opacity: 0;
    }

    .data-label {
      font-size: 12px;
      fill: #64748b;
      text-anchor: middle;
      opacity: 0;
    }

    .legend {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      gap: 20px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      opacity: 0;
    }

    .legend-color {
      width: 15px;
      height: 15px;
      border-radius: 3px;
      margin-right: 8px;
    }

    .controls {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      gap: 10px;
    }

    button {
      padding: 8px 16px;
      background: #4f46e5;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.2s;
    }

    button:hover {
      background: #4338ca;
    }
  </style>
</head>
<body>
<div class="chart-container">
  <div class="chart-title">2023年季度销售数据</div>

  <svg id="chart-svg" viewBox="0 0 600 300">
    <!-- X轴 -->
    <line class="axis" x1="50" y1="250" x2="550" y2="250"/>

    <!-- Y轴 -->
    <line class="axis" x1="50" y1="50" x2="50" y2="250"/>

    <!-- 网格线 -->
    <line class="grid-line" x1="50" y1="200" x2="550" y2="200"/>
    <line class="grid-line" x1="50" y1="150" x2="550" y2="150"/>
    <line class="grid-line" x1="50" y1="100" x2="550" y2="100"/>

    <!-- 数据折线 - 产品A -->
    <path id="line-a" class="data-line" stroke="#4f46e5"
          d="M100,200 L200,150 L300,100 L400,180 L500,120"/>

    <!-- 数据折线 - 产品B -->
    <path id="line-b" class="data-line" stroke="#10b981"
          d="M100,180 L200,120 L300,180 L400,140 L500,160"/>

    <!-- 数据点 - 产品A -->
    <circle class="data-point" cx="100" cy="200" r="6" fill="#4f46e5"/>
    <circle class="data-point" cx="200" cy="150" r="6" fill="#4f46e5"/>
    <circle class="data-point" cx="300" cy="100" r="6" fill="#4f46e5"/>
    <circle class="data-point" cx="400" cy="180" r="6" fill="#4f46e5"/>
    <circle class="data-point" cx="500" cy="120" r="6" fill="#4f46e5"/>

    <!-- 数据点 - 产品B -->
    <circle class="data-point" cx="100" cy="180" r="6" fill="#10b981"/>
    <circle class="data-point" cx="200" cy="120" r="6" fill="#10b981"/>
    <circle class="data-point" cx="300" cy="180" r="6" fill="#10b981"/>
    <circle class="data-point" cx="400" cy="140" r="6" fill="#10b981"/>
    <circle class="data-point" cx="500" cy="160" r="6" fill="#10b981"/>

    <!-- 数据标签 -->
    <text class="data-label" x="100" y="270">Q1</text>
    <text class="data-label" x="200" y="270">Q2</text>
    <text class="data-label" x="300" y="270">Q3</text>
    <text class="data-label" x="400" y="270">Q4</text>
    <text class="data-label" x="500" y="270">Q5</text>

    <!-- Y轴标签 -->
    <text x="30" y="50" font-size="12" fill="#64748b">250K</text>
    <text x="30" y="100" font-size="12" fill="#64748b">200K</text>
    <text x="30" y="150" font-size="12" fill="#64748b">150K</text>
    <text x="30" y="200" font-size="12" fill="#64748b">100K</text>
    <text x="30" y="250" font-size="12" fill="#64748b">50K</text>
  </svg>

  <div class="legend">
    <div class="legend-item" id="legend-a">
      <div class="legend-color" style="background-color: #4f46e5;"></div>
      <span>产品A</span>
    </div>
    <div class="legend-item" id="legend-b">
      <div class="legend-color" style="background-color: #10b981;"></div>
      <span>产品B</span>
    </div>
  </div>

  <div class="controls">
    <button id="play-btn">播放动画</button>
    <button id="reset-btn">重置</button>
  </div>
</div>

<!-- 引入GSAP库和插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/DrawSVGPlugin.min.js"></script>

<script>
  // 注册插件
  gsap.registerPlugin(DrawSVGPlugin);

  // 准备动画元素
  const dataPointsA = gsap.utils.toArray('.data-point:nth-child(6n+1), .data-point:nth-child(6n+2), .data-point:nth-child(6n+3), .data-point:nth-child(6n+4), .data-point:nth-child(6n+5)');
  const dataPointsB = gsap.utils.toArray('.data-point:nth-child(6n+6), .data-point:nth-child(6n+7), .data-point:nth-child(6n+8), .data-point:nth-child(6n+9), .data-point:nth-child(6n+10)');
  const dataLabels = gsap.utils.toArray('.data-label');

  // 创建主时间线
  const chartTimeline = gsap.timeline({paused: true});

  // 动画序列
  chartTimeline
          // 绘制产品A折线
          .fromTo("#line-a",
                  {drawSVG: "0% 0%"},
                  {drawSVG: "0% 100%", duration: 1.5})

          // 显示产品A数据点
          .to(dataPointsA,
                  {opacity: 1, scale: 0, duration: 0.3, stagger: 0.2}, "-=1")
          .to(dataPointsA,
                  {scale: 1.2, duration: 0.2, stagger: 0.2})
          .to(dataPointsA,
                  {scale: 1, duration: 0.1, stagger: 0.2})

          // 绘制产品B折线
          .fromTo("#line-b",
                  {drawSVG: "0% 0%"},
                  {drawSVG: "0% 100%", duration: 1.5}, "-=0.5")

          // 显示产品B数据点
          .to(dataPointsB,
                  {opacity: 1, scale: 0, duration: 0.3, stagger: 0.2}, "-=1")
          .to(dataPointsB,
                  {scale: 1.2, duration: 0.2, stagger: 0.2})
          .to(dataPointsB,
                  {scale: 1, duration: 0.1, stagger: 0.2})

          // 显示数据标签
          .to(dataLabels,
                  {opacity: 1, y: -5, duration: 0.5, stagger: 0.1}, "-=0.5")

          // 显示图例
          .to("#legend-a",
                  {opacity: 1, x: -10, duration: 0.5}, "-=0.5")
          .to("#legend-b",
                  {opacity: 1, x: -10, duration: 0.5}, "-=0.4");

  // 控制按钮
  document.getElementById('play-btn').addEventListener('click', () => {
    chartTimeline.play();
  });

  document.getElementById('reset-btn').addEventListener('click', () => {
    chartTimeline.restart();
    chartTimeline.pause();
  });

  // 初始状态
  chartTimeline.pause();
</script>
</body>
</html>